<template>
  <div class="cxy-page">
    <div class="page-title">发现</div>
    <div class="list">
      <div class="itemcell" v-for='(obj,n) in showList' :key='n' @click='itemClick(obj)'>
        <img class="cxy-profileimg" :src="obj.profileImgUrl">
        
        <div class="jobName">{{obj.jobName}}</div>
        <div class="realName">{{obj.realname}}</div>
        <div class="city">{{obj.city}}</div>
        <div class="shotMsg" cols="44" rows="4" wrap="virtual">{{obj.shotMsg}}</div>
        <button class="like-btn"></button>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    created(){
      this.fetchList()
    },
    mounted(){
      
    },
    data(){
      return {
        list:[],
        showList:[],
      }
    },
    methods:{
      itemClick(obj){
        let url = `../persondetail/main?pid=${obj.pid}`;
        wx.navigateTo({url});
      },
      fetchList(){
        let self = this;
        wx.showLoading({
          title:'加载中...',
        });
        wx.request({
          url: this.baseURI + 'user/list',
          method: 'GET',
          data:'',
          success: function (res) {
            self.list = res.data['data'];
            console.log(self.list[0]);
            self.showList = self.list.slice(0, 30);
            self.$nextTick(function() {
              wx.hideLoading();
            });
          }
        })
      },


    },
  }
</script>


<style scoped>
  .page-title {
    font-size: 32px;
    color: black;
    margin-top: 60px;
    margin-left: 30px;
  }
  .list {
    height: 80%;
    margin-top: 10px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    padding-left: 20px;
    padding-top: 10px;
  }

  .list::-webkit-scrollbar {
      display: none;
  }

  .itemcell {
    display: inline-block;
    position: relative;
    height: calc(100% - 20px);
    width: calc(100% - 40px);
    background-color: white;
    margin-right: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.50);
    overflow: hidden;
  }
  .cxy-profileimg {
    width: 100%;
    height: 240px;
  }
  
  .jobName {
    padding: 25px;
    padding-top: 15px;
    color: #BCBCBC;
    font-size: 14px;
    padding-bottom: 10px;
  }
  .realName {
    padding: 25px;
    font-size: 22px;
    padding-top: 0;
    padding-bottom: 10px;
  }
  .city {
    padding: 25px;
    padding-top: 0;
    padding-bottom: 10px;
    font-size: 18px;
    color: #BCBCBC;
  }
  .shotMsg {
    padding-left: 25px;
    padding-right: 25px;
    width: calc(100% - 50px);
    color: #999;
    white-space: normal;
    font-size: 15px;
    margin-bottom: 10px;
    overflow: hidden;
    height: 60px;
  }
  button::after {
    border: none;
  }
  .like-btn {
    display: none;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 270px;
    right: 20px;
    border: none;
    outline: none;
    border-radius: 50%;
    background-color: #fff;
    box-shadow: 0 0px 5px rgba(0,0,0,0.20);
    background-image: url();
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
  }


</style>
